<template>
    <div class="big">
        <input type="checkbox" id="yitiji" />
        <label for="yitiji"><img src="../../img/pms_1545975724.92496169.jpg" alt="" /></label>
        <div v-for="(item, index) in books" :key="item.id" class="box1">
            <span class="sp1"> {{ item.name }} </span>
            <!-- 白色 -->
            <div class="baise">
                <span> {{ item.color }} </span>
            </div>

            <div class="jiage">
                <div class="jgl">
                    {{ item.price | newPrice }}
                    <div class="jg2">
                        {{ item.priceT | newPrice }}
                    </div>
                </div>
                <div class="jgr">
                    <button @click="reduce(index)"><span>-</span></button>
                    {{ item.num }}
                    <button @click="add(index)"><span>+</span></button>
                </div>
            </div>
        </div>
        <cartall></cartall>
    </div>
</template>

<script>
import cartall from './cartAll.vue';
export default {
    components: {
        cartall
    },
    data() {
        return {
            books: [
                {
                    id: 1,
                    name: '米家互联网洗烘一体机10kg',
                    color: '白色',
                    price: 1999,
                    priceT: 2999,
                    num: 1
                }
            ]
        };
    },
    //函数
    methods: {
        reduce(index) {
            if (this.books[index].num > 1) {
                this.books[index].num--;
            }
        },
        add(index) {
            this.books[index].num++;
        },
        remove(index) {
            this.books.splice(index, 1);
        }
    },

    //过滤器
    filters: {
        newPrice(val) {
            return '￥' + val.toFixed(2);
        }
    },

    //计算属性
    computed: {
        totalPrice() {
            let allPrice = 0;
            for (let i = 0; i < this.books.length; i++) {
                let total = this.books[i];
                allPrice += total.price * total.num;
            }
            return allPrice;
        }
    }
};
</script>

<style lang="scss" scoped>
.big {
    width: 90%;
    height: 220px;
    margin: auto;
    background-color: #ffffff;
    position: relative;
    top: 180px;
    input {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 20px;
    }
    label {
        font-size: 20px;
        img {
            width: 250px;
            height: 220px;
        }
    }
    .sp1 {
        font-size: 22px;
        vertical-align: top;
        position: absolute;
        top: 20px;
        left: 40%;
    }

    .baise {
        position: absolute;
        top: 80px;
        left: 40%;
        width: 55px;
        height: 25px;
        font-size: 15px;
        padding-top: 4px;
        text-align: center;
        background-color: #ececec;
        border-radius: 3.2px;
    }
}
.jiage {
    position: absolute;
    left: 40%;
    top: 80%;
    display: flex;
    width: 300px;
    justify-content: space-between;
}
.jgl {
    font-size: 30px;
    color: rgb(255, 77, 0);
    display: flex;
}
.jg2 {
    font-size: 13px;
    color: black;
    text-decoration: line-through;
    margin-top: 20px;
}
.jgr {
    margin-top: 10px;
}
button {
    width: 30px;
    height: 20px;
    background-color: #f1f1f1;
    border: none;

    span {
        font-size: 18px;
    }
}
</style>
